/**
* @desc 通用 page 页面
* @author 钱炜亮
* @date 2024-04-21
*/
<template>
  <view class="common-page" :class="{ 'custom-page': custom, 'tab-page': tab }" :style="{ padding }">
    <slot />
    <!-- 自定义 toast 节点-->
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
	props: {
		// 是否自定义导航栏，这时可能要加上顶部适配
		custom: { type: Boolean, default: false },
		// 是否是 tab 页面，这时底部不要适配
		tab: { type: Boolean, default: false },
		// padding 值，默认全部是 0 32rpx
		padding: { type: String, default: '0 32rpx' }
	},
	data() {
		return {};
	},
	computed: {},
	mounted() {
		// 定义 toast 事件监听
		uni.$on('toast', this.showToast);
	},
	onDestroy() {
		// 移除 toast 事件监听
		this.$off('toast', this.showToast);
	},
	methods: {
		/* ====== S 事件区域 ====== */
		/**
     * 显示 toast，如果传入了第二个参数，则会在提示完毕后跳转页面
     * @param toastInfo toast 提示的信息，默认传入一个空字符串，也可以传入各个参数，配置参考 uview 的 toast 组件
     * @param routeInfo 页面跳转的参数，可以传入一个字符串，也可以传入各个参数，配置参考 https://www.uviewui.com/js/route.html
     */
		showToast(toastInfo, routeInfo = null) {
			let toastConfig = {};
			// 仅仅传入字符串，封装一下数据
			if (typeof toastInfo === 'string') {
				toastConfig.message = toastInfo;
			} else {
				toastConfig = { ...toastInfo };
			}
			// 如果传入了第二个参数，则在提示完毕后跳转页面
			if (routeInfo) {
				toastConfig.complete = () => {
					// 参数参考 https://www.uviewui.com/js/route.html
					uni.$u.route(routeInfo);
				};
			}
			this.$refs.uToast.show(toastConfig);
		}
		/* ====== E 事件区域 ====== */
		/* ====== S 通用逻辑 ====== */

		/* ====== E 通用逻辑 ====== */
		/* ====== S 接口定义 ====== */

		/* ====== E 接口定义 ====== */
	}
};
</script>

<style lang="scss" scoped>
.common-page {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding-bottom: constant(safe-area-inset-bottom) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}
.custom-page {
  padding-top: constant(safe-area-inset-top) !important;
  padding-top: env(safe-area-inset-top) !important;
}
.tab-page {
  padding-bottom: 0 !important;
}
</style>
